
window.addEventListener('load', function () {
    var article_center_l = document.querySelector('.article_center_l');
    var article_center_r = document.querySelector('.article_center_r');
    var article_center = this.document.querySelector('.article_center');
    var article_left_img = this.document.querySelector('.article_left_img');
    var img = this.document.querySelector('.article_left_img').querySelector('img');
    var article_left_img_li = article_left_img.children;
    var article_left_dian = this.document.querySelector('.article_left_dian');
    var imgWidth = img.offsetWidth
    var g = 0;
    var umu = 0;
    
    
    article_center.addEventListener('mouseover', function () {
        article_center_l.style.display = 'block'
        article_center_r.style.display = 'block'
        clearInterval(times)
    })//鼠标出现
    article_center.addEventListener('mouseleave', function () {
        article_center_l.style.display = 'none'
        article_center_r.style.display = 'none'
        times = setInterval(function(){
            article_center_r.click()
        },2000)
    })//鼠标移开消失
    for (var i = 0; i < article_left_img_li.length; i++) {
        var li = this.document.createElement('li');
        article_left_dian.appendChild(li);//创建li
        article_left_dian.children[0].style.backgroundColor = '#fff';//给第一个li背景色
        var article_left_dian_li = article_left_dian.children;//获取li
        article_left_dian_li[i].addEventListener('click', function () { //li的点击事件
            for (var i = 0; i < article_left_dian_li.length; i++) {
                article_left_dian_li[i].style.backgroundColor = 'transparent'//清除
                article_left_dian_li[i].setAttribute('index', i);
            }
            var index = this.getAttribute('index')
            umu = index;
            g = index
            console.log(index);
            this.style.backgroundColor = '#fff'//赋予
            move(article_left_img, -imgWidth * index)

        })
    }
    
    var img1 = article_left_img_li[0].cloneNode(true);
    article_left_img.appendChild(img1)
    var fang = true
    article_center_r.addEventListener('click', function () {
        if (fang) {
            fang = false;
            if (umu == article_left_img_li.length - 1) {
                article_left_img.style.left = '0'
                umu = 0
            }
            umu++
            move(article_left_img, -umu * imgWidth,function(){
                fang = true
            });
            g++
            if(g == article_left_dian_li.length) {
                g = 0
            }
            for (var i = 0 ; i <article_left_dian_li.length ; i++) {
                article_left_dian_li[i].style.backgroundColor = 'transparent'
            }
            article_left_dian.children[g].style.backgroundColor = '#fff';
        }
        
    })


    article_center_l.addEventListener('click', function () {
        if (fang) {
            fang = false;
            if (umu == 0) {
                umu = article_left_dian.children.length 
                article_left_img.style.left = -umu * imgWidth+ 'px';
            }
            umu--
            move(article_left_img,- umu * imgWidth,function(){
                fang = true
            });
            g--
            if(g < 0) {
                g = article_left_dian.children.length -1
            }
            for (var i = 0 ; i <article_left_dian_li.length ; i++) {
                article_left_dian_li[i].style.backgroundColor = 'transparent'
            }
            article_left_dian.children[g].style.backgroundColor = '#fff';
            
        }
    })
    var times = this.setInterval(function(){
        article_center_r.click()
    },2000)
})